<template>
  <div class="tabs order-tabs">
    <div class="hd">
      <ul>
        <li class="item"
          v-for="(item, index) in tabs"
          @click="selOrderType(index)"
          :ref="'cur' + index"
          :class="{'active':index==active}">
          {{item}}
          </li>
      </ul>
      <i class="modify" ref="tabModify"></i>
    </div>
    <div class="bd">
      <OrderListItem
        :type="active"
        :datas="datas"
        transition-mode="out-in"
        @orderReceived="orderReceived"
        keep-alive />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import OrderListItem from './orderlist_item'
import $http from '@/api'
export default {
  data () {
    return {
      title: 'mine',
      tabs: ['全部', '待付款', '待发货', '待收货', '已完成', '已取消'],
      active: 0,
      datas: []
    }
  },
  created() {
    this._getOrderList()
    let type = this.$route.query.type
    if (type) {
      this.active = Number(type)
    }
  },
  mounted() {
    this.$refs['cur' + this.active][0].click()
  },
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo'
    })
  },
  methods: {
    orderReceived(type) {
      this._getOrderList(type)
    },
    _getOrderList(type) {
      $http.orderList(type).then(res => {
        if (res.code === 0) {
          this.datas = res.data
        } else {
          this.$layer.toast({icon: 'icon-check',
            content: '网络请求失败，刷新后再试~',
            time: 2000
          })
        }
      })
    },
    goback() {
      this.$router.go(-1)
    },
    selOrderType(index) {
      this._getOrderList(index)
      this.active = index
      let tabModify = this.$refs.tabModify
      let currentTarget = event.target
      tabModify.style.left = currentTarget.offsetLeft + 'px'
      tabModify.style.width = currentTarget.clientWidth + 'px'
    }
  },
  components: {
    OrderListItem
  },
  watch: {
    $route(route) {
      let type = Number(route.query.type)
      if (type) {
        this._getOrderList(type)
        this.$refs['cur' + type][0].click()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/assets/styles/orderlist';
</style>
